<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索框</title>
		<style type="text/css">
			body{height: 2000px;}
			#searchBox{height: 60px; width: 180px; border: 1px solid red; position: absolute;}
		</style>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(window).scroll(function(){
					var $height=parseInt($("#searchBox").height());
					var $width=parseInt($("#searchBox").width());
					var $scrollHeight=parseInt($(this).scrollTop());
					var $scrollwidth=parseInt($(this).scrollLeft());
					if($scrollHeight>$height){
					$("#searchBox").offset({top:$scrollHeight})	
					}else{
					$("#searchBox").offset({top:0})	
					}
					if($scrollwidth>$width){
						$("#searchBox").offset({left:$scrollwidth});
					}else{
						$("#searchBox").offset({left:0});
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="searchBox">
			<form action="" method="post">
				<input type="search" name="" required="" placeholder="Search" >
				<input type="submit" id="" name="" />
			</form>
		</div>
	</body>
</html>
